<template>
	<!-- <view class="blue-loading">20%</view> -->
	<view class="teacup-loading">20%</view>
</template>

<script>
</script>

<style>
	.blue-loading {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 100%;
		width: 40px;
		height: 40px;
		background-image: linear-gradient(45deg, rgb(20 199 253), rgb(236 47 16));
		color: white;
		font-size: 12px;
		font-weight: bold;
		box-shadow: 0 3px 2px 1px rgb(138 210 245);
	}

	.bubble-loading::before,
	.bubble-loading::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		display: block;
		margin-left: -20px;
		margin-top: -20px;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		background-color: rgb(51, 149, 230);
		transform: translateY(-2px);
		z-index: -1;
	}

	.bubble-loading::before {
		animation: rotate2 infinite 3s linear;
	}

	.bubble-loading::after {
		animation: rotate2 infinite 2s linear;
	}

	@keyframes rotate2 {
		0% {
			transform: rotate(0deg) translateY(-2px);
		}

		100% {
			transform: rotate(360deg) translateY(-2px);
		}
	}


	.teacup-loading {
		/*相对定位 作为绝对定位元素的父容器*/
		position: relative;

		/*弹性布局，容器内元素水平居中*/
		display: flex;
		justify-content: center;

		/*设置水杯外形、大小及颜色*/
		border: 4px solid rgb(30, 29, 20);
		border-radius: 0 0 16px 16px;
		border-top-width: 0;
		width: 40px;
		height: 40px;
		background-color: #fff3da;

		/*设置进度百分比文字样式*/
		font-size: 12px;
		font-weight: bold;
		line-height: 24px;
		color: rgb(30, 29, 20);

		/*隐藏溢出的内部元素*/
		overflow: hidden;

		/*设置元素外部阴影*/
		box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.2);

		/*设置3D模式下Z轴偏移量为0*/
		transform: translateZ(0);
	}

	.teacup-loading::before,
	.teacup-loading::after {
		content: '';
		/*绝对定位元素*/
		position: absolute;

		/*设置元素的位置*/
		bottom: 0;
		left: 0;
		z-index: 0;
		right: -120px;
		height: 20px;

		/*自定义多边形*/
		clip-path: polygon(
				0% 20%,
				2% 18%,
				3% 16%,
				5% 14%,
				7% 13%,
				8% 11%,
				10% 10%,
				12% 10%,
				13% 10%,
				15% 10%,
				17% 11%,
				18% 13%,
				20% 14%,
				22% 16%,
				23% 18%,
				25% 20%,
				27% 22%,
				28% 24%,
				30% 26%,
				32% 27%,
				33% 29%,
				35% 30%,
				37% 30%,
				38% 30%,
				40% 30%,
				42% 29%,
				43% 27%,
				45% 26%,
				47% 24%,
				48% 22%,
				50% 20%,
				52% 18%,
				53% 16%,
				55% 14%,
				57% 13%,
				58% 11%,
				60% 10%,
				62% 10%,
				63% 10%,
				65% 10%,
				67% 11%,
				68% 13%,
				70% 14%,
				72% 16%,
				73% 18%,
				75% 20%,
				77% 22%,
				78% 24%,
				80% 26%,
				82% 27%,
				83% 29%,
				85% 30%,
				87% 30%,
				88% 30%,
				90% 30%,
				92% 29%,
				93% 27%,
				95% 26%,
				97% 24%,
				98% 22%,
				100% 20%,
				100% 100%,
				0% 100%);
	}

	.teacup-loading::before {
		background-color: rgb(33, 203, 255);
		animation: move1 6s linear infinite;
	}

	.teacup-loading::after {
		background-color: rgb(24, 136, 255);
		animation: move2 2s linear infinite;
	}

	@keyframes move1 {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-80px);
		}
	}

	@keyframes move2 {
		0% {
			transform: translateX(-20px);
		}

		100% {
			transform: translateX(-100px);
		}
	}
</style>
